<template>
	<view :id="templateId" v-if="loaded" class="contaner">
		<view :style="themeStyles.btnFullColor" class="status-wrap">
			<!-- 状态区域 begin -->
			<view class="status-content">
				<uni-icon
					:color="themeStyles.auxiliaryColor"
					:name="viewStatusIcon(orderInfo.status)"
					size="64rpx"
				>
				</uni-icon>
				<view class="df1 content">
					<view class="title">{{ orderInfo.statusValue }}</view>
					<view class="desc">{{ orderInfo.statusTitle }}</view>
				</view>
			</view>
			<!-- 状态区域 end -->
		</view>
		<!-- 地址 -->
		<view class="page-panel address-section">
			<view v-if="orderInfo.logisticsTime" class="logistics-content">
				<uni-icon
					:color="themeStyles.adronmentColor"
					name="car-full"
					size="60rpx"
				>
				</uni-icon>
				<view class="cen">
					<view
						:style="themeStyles.textAdronmentColor"
						class="logistics-desc"
						>{{ orderInfo.logisticsMessage }}</view
					>
					<text class="logistics-date">{{
						orderInfo.logisticsTime
					}}</text>
				</view>
			</view>
			<view class="address-content">
				<uni-icon
					:color="themeStyles.lightMainColor"
					name="address-full"
					size="60rpx"
				>
				</uni-icon>
				<view class="cen">
					<view class="top">
						<text class="name">{{ orderInfo.customerName }}</text>
						<text class="mobile">{{
							orderInfo.customerPhone
						}}</text>
					</view>
					<text class="address">{{
						orderInfo.customerAddress || ""
					}}</text>
				</view>
				<!-- <uni-icon
          name="right"
          size="36rpx"
        ></uni-icon> -->
			</view>
		</view>

		<view class="goods-section">
			<!-- 商品列表 -->
			<view class="goods-list">
				<view
					v-for="(item, index) in orderInfo.orderGoodsList"
					:key="index"
					class="goods-item"
				>
					<uni-goods-col
						:goods="item"
						:routeLink="
							`/pages/common/pages/goods/goodsDetail?goodsId=${item.goodsId}`
						"
						:goodsTypeText="item.skuName"
						:goodsPrice="item.priceStr.split('.')"
						:latePrice="item.priceOut"
					>
						<view slot="metaRight">
							<view class="cut-num">x{{ item.buyNumber }}</view>
						</view>
					</uni-goods-col>
				</view>
			</view>
		</view>

		<!-- 金额明细 -->
		<view class="price-section">
			<view class="yt-list">
				<view class="df jc-sb yt-list-cell">
					<text class="cell-tit clamp">订单号</text>
					<text class="cell-right">{{ orderInfo.orderId }}</text>
				</view>
				<view class="df jc-sb yt-list-cell">
					<text class="cell-tit clamp">运费</text>
					<text class="cell-right">{{
						orderInfo.freight > 0
							? "￥" + orderInfo.freight
							: "快递免邮"
					}}</text>
				</view>
				<view class="df jc-fe ai-fe real-price-box">
					<text class="title">实付金额：</text>
					<view :style="themeStyles.textMainColor" class="price-box">
						<text class="price">{{ orderInfo.totalFee[0] }}</text>
						<text class="decimal">{{
							orderInfo.totalFee[1] || "00"
						}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="df jc-fe footer">
			<view class="btn-group">
				<button
					v-if="viewBtn(orderInfo.status, 1)"
					@click.stop="queryLogistisc(orderInfo.logisticsNo)"
					type="primary"
					class="df df-c btn"
				>
					查看物流
				</button>

				<button
					v-if="viewBtn(orderInfo.status, 4)"
					@click="onDeleteOrder(orderInfo.orderId)"
					type="primary"
					class="df df-c btn"
				>
					删除订单
				</button>
				<!-- 主按钮 begin -->
				<button
					v-if="!!statusPrompt.submitBtnText"
					type="primary"
					:style="themeStyles.btnFullColor"
					class="df df-c btn full"
					@click="onFullSubmit()"
				>
					{{ statusPrompt.submitBtnText }}
				</button>
				<!-- 主按钮 end -->
			</view>
		</view>
	</view>
</template>

<script>
/** api begin */
import { queryDefaultAddress } from "@/lib/api/customerServer/address";

import {
	queryOrderDetail,
	updateOrderAddrFromApp
} from "@/lib/api/orderServer/order";

import { baseFileUri } from "@/utils/request/baseConfig";
/** api end */

/** components begin */
import uniCountdown from "@/components/uniCountdown/uniCountdown";
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniIcon from "@/components/uniIcon/uniIcon";
/** components end */

/** minxins begin */
import orderMixin from "@/mixins/order/order";
import payMixin from "@/mixins/pay";
/** minxins end */

import { mapState, mapMutations } from "vuex";
export default {
	mixins: [orderMixin, payMixin],
	components: {
		uniCountdown,
		uniGoodsCol,
		uniIcon
	},

	data() {
		return {
			statusPrompt: {
				title: "",
				desc: "",
				submitBtnText: ""
			},
			orderId: "",
			addressId: "",
			goodsList: null,
			showBatchBtn: false,
			orderInfo: {
				goodsList: []
			},

			addressData: {},
			baseFileUri
		};
	},

	onLoad(option) {
		console.log("option", option);
		this.orderId = option.orderId || "";
	},

	onShow() {
		this.getOrderDetail();
	},

	methods: {
		async onFullSubmit() {
			const status = this.orderInfo.status; // 100: 待付款 300: 确认收货
			const orderId = this.orderInfo.orderId;
			if (status === 100) {
				try {
					await this.onPay(orderId);
					uni.redirectTo({
						url: "/pages/integral/pages/order/orderList"
					});
				} catch (error) {
					console.log("error", error);
					this.$api.showToast("支付失败");
				}
			} else if (status === 300) {
				this.onConfirmReceipt(orderId);
			}
		},

		async onCancelOrder(orderId) {
			try {
				await this.cancelOrder(orderId);
				await this.$api.showToast("成功取消");
				uni.redirectTo({
					url: "/pages/integral/pages/order/orderList"
				});
			} catch (error) {
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onConfirmReceipt(orderId) {
			try {
				await this.confirmReceipt(orderId);
				await this.$api.showToast("操作成功");
				uni.redirectTo({
					url: "/pages/integral/pages/order/orderList"
				});
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async onDeleteOrder(orderId) {
			try {
				await this.deleteOrder(orderId);
				await this.$api.showToast("删除成功");
				uni.redirectTo({
					url: "/pages/integral/pages/order/orderList"
				});
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		// 查询订单详情
		async getOrderDetail() {
			const propsData = {
				orderId: this.orderId
			};
			try {
				const res = await queryOrderDetail(propsData);
				res.data.totalFee = `${res.data.totalFee}`.split(".");

				// res.data.orderGoodsList.forEach((item, index) => {
				//   res.data.orderGoodsList[index].price = item.priceStr.split(".");
				// });

				// res.data.orderGoodsList = this.splitGoodsPrice(
				//   res.data.orderGoodsList,
				//   "price",
				//   "priceStr"
				// );

				this.orderInfo = res.data;
				this.viewFullSubmitText(this.orderInfo.status);
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "操作失败");
				uni.navigateBack();
			}
			this.loaded = true;
		},

		// 主按钮文字
		viewFullSubmitText(status) {
			let submitBtnText = "";
			if (status === 100) {
				submitBtnText = "立即付款";
			} else if (status === 300) {
				submitBtnText = "确认收货";
			}
			this.statusPrompt.submitBtnText = submitBtnText;
		},

		// 状态icon图标显示
		viewStatusIcon(status) {
			if (status === 100 || status === 200) {
				return "clock-full";
			} else {
				return "checkmark-hollow";
			}
		},

		stopPrevent() {}
	}
};
</script>

<style lang="scss">
// 订单样式
@import "@/common/styles/order/orderDetail.scss";

.contaner {
	padding-top: 204rpx;
}

.price-section {
	margin-bottom: 120rpx;
}

/** 订单状态 */

.status-wrap {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 180rpx;
	.status-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 0 40rpx;
		.content {
			margin-left: 16rpx;
			.title {
				font-size: $theme-size-large-base;
			}
			.desc {
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
	}
}

.footer {
	.btn-group {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-direction: row;
		.btn {
			width: 184rpx;
		}
	}
}
</style>
